<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>执行器列表</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../sources/bootstrap/css/bootstrap.min.css" />
<script src="../sources/bootstrap/js/jquery-2.1.1.min.js"></script>
<script src="../sources/bootstrap/js/bootstrap.min.js"></script>
<script th:inline="javascript">
	var tasks = [[${tasks}]];
	function search() {
		$
			.ajax({
				url : "/api/task/queryTaskByParam",
				data : {
					taskCode : $("#taskCode").val(),
					taskName : $("#taskName").val()
				},
				async : true,
				timeout : 90000,
				type : "GET",
				success : function(data) {
					$("#taskBody").html("");
					tasks = data;
					var str = "";
					$.each(
							data,
							function(idx, item) {
								str = str + '<tr>';
								str = str + '<td>' + item.taskName + '</td>';
								str = str + '<td>' + item.taskCode + '</td>';
								str = str + '<td>' + item.taskHeader + '</td>';
								str = str + '<td>' + item.taskParam + '</td>';
								str = str + '<td>' + item.taskType + '</td>';
								str = str + '<td>' + item.callbackAddress + '</td>';
								str = str + '<td>' + item.taskUrl + '</td>';
								str = str + '<td>' + item.taskCron + '</td>';
								str = str + '<td>' + item.status + '</td>';
								str = str + '<td>' + item.retryCount + '</td>';
								str = str + '<td>' + item.actuatorCode + '</td>';
								str = str + '<td>' + item.createTime + '</td>';
								str = str
									+ '<td><button type="button" class="btn btn-success" data-toggle="modal" data-target="#updateTaskModal"  onclick="initUpdate('+idx+')">更新</button>';
								str = str + '&nbsp;&nbsp;&nbsp;&nbsp;';
								str = str
									+ '<button type="button" class="btn btn-danger" onclick="deleteTask('+idx+')">删除</button></td>';
								str = str + '</tr>';
							});
					$("#taskBody").html(str);
				},
				dataType : "json",
				error : function() {
				}
			});
	}
	function insert() {
		$("#insertTaskForm").submit();
	}
	
	function update() {
		$("#updateTaskForm").submit();
	}
	
	function deleteTask(idx) {
		$("#deleteId").attr("value",tasks[idx].id);
		$("#deleteTaskForm").submit();
	}

	function initUpdate(idx) {
		/*<![CDATA[*/
		$("#updateId").attr("value",tasks[idx].id);
		$("#updateTaskName").attr("value",tasks[idx].taskName);
		$("#updateTaskCode").attr("value",tasks[idx].taskCode);
		$("#updateTaskHeader").attr("value",tasks[idx].taskHeader);
		$("#updateTaskParam").attr("value",tasks[idx].taskParam);
		$("#updateTaskType").attr("value",tasks[idx].taskType);
		$("#updateCallbackAddress").attr("value",tasks[idx].callbackAddress);
		$("#updateTaskUrl").attr("value",tasks[idx].taskUrl);
		$("#updateTaskCron").attr("value",tasks[idx].taskCron);
		$("#updateStatus").attr("value",tasks[idx].status);
		$("#updateRetryCount").attr("value",tasks[idx].retryCount);
		$("#updateActuatorCode").attr("value",tasks[idx].actuatorCode);
		$("#updateCreateTime").attr("value",tasks[idx].createTime);
		/*]]>*/
	}
</script>
</head>
<body>
	<table class="table table-bordered table-hover">
		<thead>
			<h3 class="text-muted">执行器列表</h3>
		</thead>
		<caption>
			<form class="form-inline" id="searchTaskForm" action="/task/index">
				<div class="form-group">
					<label for="taskCode">执行器代码</label> <input type="text"
						class="form-control" id="taskCode" name="taskCode" />
				</div>
				<div class="form-group">
					<label for="taskName">执行器名称</label> <input type="text"
						class="form-control" id="taskName" name="taskName" />
				</div>
				<button type="button" class="btn btn-primary" id="actSearchButton" onclick="search()">搜索</button>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<button type="button" class="btn btn-info" data-toggle="modal"
					data-target="#insertTaskModal">新增执行器</button>
			</form>
		</caption>
		<thead>
			<tr>
				<th>任务名称</th>
				<th>任务代码</th>
				<th>任务头</th>
				<th>任务类型</th>
				<th>回调地址</th>
				<th>任务地址</th>
				<th>任务参数</th>
				<th>定时公式</th>
				<th>任务状态</th>
				<th>重试次数</th>
				<th>执行器代码</th>
				<th>创建时间</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="taskBody">
			<tr th:each="taskIter,rowStat:${tasks}">
				<td th:text="${taskIter.taskName}" />
				<td th:text="${taskIter.taskCode}" />
				<td th:text="${taskIter.taskHeader}" />
				<td th:text="${taskIter.taskParam}" />
				<td th:text="${taskIter.taskType}" />
				<td th:text="${taskIter.callbackAddress}" />
				<td th:text="${taskIter.taskUrl}" />
				<td th:text="${taskIter.taskCron}" />
				<td th:text="${taskIter.status}" />
				<td th:text="${taskIter.retryCount}" />
				<td th:text="${taskIter.actuatorCode}" />
				<td th:text="${taskIter.createTime}" />
				<td>
					<button type="button" class="btn btn-success" data-toggle="modal"
						data-target="#updateTaskModal"
						th:onclick="'javascript:initUpdate('+${rowStat.index}+');'">更新</button>
					&nbsp;&nbsp;&nbsp;&nbsp;
					<button type="button" class="btn btn-danger"
						th:onclick="'javascript:deleteTask('+${rowStat.index}+');'">删除</button>
				</td>
			</tr>
		</tbody>
	</table>

	<form class="form-horizontal" id="deleteTaskForm" action="/task/delete"
		method="post">
		<input type="hidden" id="deleteId" name="id" />
	</form>

	<div class="modal fade" id="insertTaskModal" tabindex="-1"
		role="dialog" aria-labelledby="insertTaskModalLabel"
		aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="insertTaskModalLabel">新增任务</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="insertTaskForm"
						action="/task/insert" method="post">
						<div class="form-group">
							<label for="newTaskCode" class="col-sm-2 control-label">任务代码</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="newTaskCode"
									name="taskCode" placeholder="task_test" />
							</div>
						</div>
						<div class="form-group">
							<label for="newTaskName" class="col-sm-2 control-label">任务名称</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="newTaskName"
									name="taskName" placeholder="测试任务" />
							</div>
						</div>
						<div class="form-group">
							<label for="newTaskHeader" class="col-sm-2 control-label">任务header</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="newTaskHeader"
									name="taskHeader"
									placeholder="{&quot;Content-Type&quot;:&quot;application/json&quot;}" />
							</div>
						</div>
						<div class="form-group">
							<label for="newTaskType" class="col-sm-2 control-label">任务类型</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="newTaskType"
									name="taskType" placeholder="SYNC" />
							</div>
						</div>
						<div class="form-group">
							<label for="newCallbackAddress" class="col-sm-2 control-label">回调地址</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="newCallbackAddress"
									name="callbackAddress" placeholder="当任务类型为异步时，必填" />
							</div>
						</div>
						<div class="form-group">
							<label for="newTaskParam" class="col-sm-2 control-label">任务参数</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="newTaskParam"
									name="taskParam" placeholder="" />
							</div>
						</div>
						<div class="form-group">
							<label for="newTaskUrl" class="col-sm-2 control-label">任务地址</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="newTaskUrl"
									name="taskUrl" placeholder="http://www.baidu.com" />
							</div>
						</div>
						<div class="form-group">
							<label for="newTaskCron" class="col-sm-2 control-label">任务时间</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="newTaskCron"
									name="taskCron" placeholder="0 0 0/1 * * ?" />
							</div>
						</div>
						<div class="form-group">
							<label for="newRetryCount" class="col-sm-2 control-label">重试次数</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="newRetryCount"
									name="retryCount" placeholder="" />
							</div>
						</div>
						<div class="form-group">
							<label for="newActuatorCode" class="col-sm-2 control-label">执行器代码</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="newActuatorCode"
									name="actuatorCode" placeholder="" />
							</div>
						</div>
					</form>
					<p class="text-danger">0 15 10 * * ? * 每天10点15分触发</p>
					<p class="text-danger">0 15 10 * * ? 2017 2017年每天10点15分触发</p>
					<p class="text-danger">0 * 14 * * ? 每天下午的 2点到2点59分每分触发</p>
					<p class="text-danger">0 0/5 14 * * ? 每天下午的
						2点到2点59分(整点开始，每隔5分触发)</p>
					<p class="text-danger">0 0/5 14,18 * * ? 每天下午的
						2点到2点59分、18点到18点59分(整点开始，每隔5分触发)</p>
					<p class="text-danger">0 0-5 14 * * ? 每天下午的 2点到2点05分每分触发</p>
					<p class="text-danger">0 15 10 ? * 6L 每月最后一周的星期五的10点15分触发</p>
					<p class="text-danger">0 15 10 ? * 6#3 每月的第三周的星期五开始触发</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消
					</button>
					<button type="button" class="btn btn-info" onclick="insert()">新增</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="updateTaskModal" tabindex="-1"
		role="dialog" aria-labelledby="updateTaskModalLabel"
		aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="updateTaskModalLabel">更新任务</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="updateTaskForm"
						action="/task/update" method="post">
						<input type="hidden" id="updateId" name="id" />
						<div class="form-group">
							<label for="updateTaskCode" class="col-sm-2 control-label">任务代码</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="updateTaskCode"
									name="taskCode" />
							</div>
						</div>
						<div class="form-group">
							<label for="updateTaskName" class="col-sm-2 control-label">任务名称</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="updateTaskName"
									name="taskName" />
							</div>
						</div>
						<div class="form-group">
							<label for="updateTaskHeader" class="col-sm-2 control-label">任务header</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="updateTaskHeader"
									name="taskHeader" />
							</div>
						</div>
						<div class="form-group">
							<label for="updateTaskType" class="col-sm-2 control-label">任务类型</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="updateTaskType"
									name="taskType" />
							</div>
						</div>
						<div class="form-group">
							<label for="updateCallbackAddress" class="col-sm-2 control-label">回调地址</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="callbackAddress"
									name="updateCallbackAddress" />
							</div>
						</div>
						<div class="form-group">
							<label for="updateTaskParam" class="col-sm-2 control-label">任务参数</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="updateTaskParam"
									name="taskParam" placeholder="" />
							</div>
						</div>
						<div class="form-group">
							<label for="updateTaskUrl" class="col-sm-2 control-label">任务地址</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="updateTaskUrl"
									name="taskUrl" />
							</div>
						</div>
						<div class="form-group">
							<label for="updateTaskCron" class="col-sm-2 control-label">任务时间</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="updateTaskCron"
									name="taskCron" />
							</div>
						</div>
						<div class="form-group">
							<label for="updateRetryCount" class="col-sm-2 control-label">重试次数</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="updateRetryCount"
									name="retryCount" />
							</div>
						</div>
						<div class="form-group">
							<label for="updateActuatorCode" class="col-sm-2 control-label">执行器代码</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="updateActuatorCode"
									name="actuatorCode" />
							</div>
						</div>
					</form>
					<p class="text-danger">0 15 10 * * ? * 每天10点15分触发</p>
					<p class="text-danger">0 15 10 * * ? 2017 2017年每天10点15分触发</p>
					<p class="text-danger">0 * 14 * * ? 每天下午的 2点到2点59分每分触发</p>
					<p class="text-danger">0 0/5 14 * * ? 每天下午的
						2点到2点59分(整点开始，每隔5分触发)</p>
					<p class="text-danger">0 0/5 14,18 * * ? 每天下午的
						2点到2点59分、18点到18点59分(整点开始，每隔5分触发)</p>
					<p class="text-danger">0 0-5 14 * * ? 每天下午的 2点到2点05分每分触发</p>
					<p class="text-danger">0 15 10 ? * 6L 每月最后一周的星期五的10点15分触发</p>
					<p class="text-danger">0 15 10 ? * 6#3 每月的第三周的星期五开始触发</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消
					</button>
					<button type="button" class="btn btn-success" onclick="update()">更新</button>
				</div>
			</div>
		</div>
	</div>
</body>
</html>